<!-- PaymentSelector.vue -->
<template>
  <view>
    <!-- 支付方式选择弹窗 -->
    <uni-popup ref="popup" type="bottom" >

      <view class="popup-content">
<!--        <view class="popup-header">
        <text>请选择支付方式</text>
      </view>-->
        <view class="payment-methods">
          <view
            v-for="method in paymentMethods"
            :key="method.value"
            :class="['payment-item', { 'is-selected': selectedPayment && selectedPayment.value === method.value }]"
            @click="selectPaymentMethod(method)"
          >
            <text class="label-text">{{ method.name }}</text>
          </view>

          <!-- 显示所选支付方式的二维码 -->
          <view v-if="selectedPayment && selectedPayment.qr_code" class="qr-code-container">
            <image
              @tap="previewImages"
              :src="selectedPayment.qr_code"
              class="qr-code"
              mode="widthFix"
            />
            <text class="qr-code-label">请扫码支付</text>
            <text class="qr-code-label">支付完成记得提交</text>
          </view>
        </view>
        <!-- 关闭弹窗按钮 -->
        <button @click="confirm" class="close-button" type="primary">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import payment_api from "@/common/payment_api";
export default {
  data() {
    return {
      paymentMethods: [
        { value: '1', name: '微信支付' },
        { value: '2', name: '支付宝' },
        { value: '3', name: '转账支付', qr_code: '' }
      ],
      selectedPayment: null // 用于存储当前选择的支付方式
    };
  },
  props: {
    from: {
      type: String,
      default: () => {
        return 'order'
      }
    }
  },
  mounted() {
    // 在组件挂载后，初始化selectedPayment为null
    this.selectedPayment = null;
    this.getPaymentList()
  },
  methods: {
    getPaymentList() {
      payment_api.payment_list({
        from: this.from
      }).then(res => {
        if (res.code !== 0) {
          this.show_msg(res.msg)
          return
        }
        this.paymentMethods = res.data
      })
    },
    openPopup() {
      this.$refs.popup.open();
    },
    confirm() {
      if (!this.selectedPayment){
        this.show_msg('请选择支付方式')
        return
      }
      this.$refs.popup.close();
      this.$emit('confirm', this.selectedPayment);
    },
    selectPaymentMethod(method) {
      this.selectedPayment = method;
      // 如果选择了需要二维码的支付方式，则显示二维码
      if (method.qr_code) {
        this.$nextTick(() => {
          // 强制刷新视图以显示二维码
        });
      }
      // 可以在这里添加更多逻辑，比如更新支付状态等。
      this.$emit('payment-selected', method);
    },
    previewImages() {
      // 实现预览图片的逻辑
      uni.previewImage({
        urls: [this.selectedPayment.qr_code], // 需要预览的图片链接列表
      });
    }
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
.popup-content {
  width: 100%;
  padding: 20px;
  background-color: #fff;
}

.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  position: relative;
}

.label-text {
  font-size: 16px;
}

/* 未选中时的小圆点 */
.payment-item::after {
  content: '';
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  right: 10px; /* 调整这个值以改变小圆点的位置 */
}

/* 选中时的勾号 */
.payment-item.is-selected::after {
  content: '✔';
  font-size: 18px;
  color: green;
}

.qr-code-container {
  margin-top: 10px;
  text-align: center;
}

.qr-code {
  width: 150px;
  height: auto;
}

.qr-code-label {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}

.close-button {
  margin-top: 20px;
  width: 100%;
}
</style>
